<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar title="标题" left-text="返回" left-arrow>
            <template #left>
                <span class="iconfont iconnew icon-left"></span>
            </template>
            <template #title>
                <div class="search">
                   <van-icon name="search" size="18" /> 
                   <span>搜索商品</span>
                </div>
            </template>
            <template #right>
                <!-- <van-icon name="manager-o" /> -->
                <van-icon name="manager-o" @click="$router.push('/personal')" size="20" />
            </template>
        </van-nav-bar>   
      <!-- 导航 -->
      <!-- native修饰符，在自定义组件上绑定原生事件 -->
        <van-tabs @click.native="toCategory" v-model="curIndex" @change="changeFn">
            <van-tab v-for="item in categoryList" :title="item.name" 
            :key="item.id">
            <!-- pull-refresh下拉刷新组件
                v-model: 值为false表示加载完成，true表示正在加载中
                refresh：下载刷新的时候触发的回调函数
             -->
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <!-- 上拉加载更多数据-组件
                v-model: 值用于控制当前加载是否完成的状态，true表示没有加载完成，false表示加载完成了
                finished：true表示所有数据加载完成（数据库中已经没有数据了），false表示未加载完成。
                load：上拉加载时触发的函数，我们可以在这个事件处理函数中实现更新数据操作
                immediate-check: false表示关闭立即出发load事件
                offset: 滚动条与底部距离小于 offset 时触发load事件
                 -->
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    offset="50"
                    :immediate-check="false"
                    >
                    <!-- 新闻列表
                     .native 修饰符作用：可以使得我们能够在自定义组件上绑定原生的事件
                     -->
                    <newsItem @click.native="toPage(item.id)" v-for="item in news" 
                    :key="item.id" :obj="item"></newsItem>
                </van-list>
            </van-pull-refresh>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import newsItem from "@/components/newsItem.vue";
import { category } from "@/api/common.js";
import  { getNews } from "@/api/news.js"
export default {
    components: {newsItem},
    data(){
        return {
            categoryList: [], // 栏目列表
            curIndex: this.$route.meta.curIndex,     // 当前栏目的下标值   
            news: [],
            isLoading: false,  // 下拉刷新组件控制变量 
            loading: false,     // 上拉加载的变量    
            finished: false,    // 上拉加载 --- 是否全部加载完成的变量  
            pageIndex: 1,       // 当前页数
            pageSize: 10,       // 数据条数（表示每次请求的数据量）
        }
    },
    created(){
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        });
        // 判断缓存中是否存在栏目，如果存在则从栏目中获取，否则从接口中获取栏目数据
        if(localStorage.getItem("defaultCategory")){
            let category = JSON.parse(localStorage.getItem("categoryList"));
            let defaultCategory = JSON.parse(localStorage.getItem("defaultCategory"));
            this.categoryList = [...defaultCategory, ...category];
            if(this.curIndex>this.categoryList.length-1){
                // 防止用户选种某个栏目的时候，然后跳转到频道管理页面进行删除频道报错问题。
                this.curIndex = this.categoryList.length-1;
            }
            this.getNewsList()
            return
        }
        // 获取栏目列表
        category().then(res=>{
            console.log(38,res);
            this.categoryList = res.data.data;
            // 必须先获取到栏目id，才能调用获取文章列表的接口
            // 因为这个接口用到了栏目id
            // 首页默认显示头条新闻的，因为获取默认新闻数据的时候需要传头条栏目的id
            this.getNewsList()
        })
    },
    methods: {
        // 点击加号。跳转到频道管理页面
        toCategory(e){
            // console.log(99,e.target);
            // 因为加号是通过伪元素实现的，因为不能直接给伪元素绑定事件，那么如何解决呢？
            // 答：可以利用事件委托，然后利用点击加时的特点来判断到你当前点击的按钮时加号，然后进行跳转即可
            if(e.target.className.indexOf("van-tabs__wrap") != -1){
                this.$router.push("/category");
            }
        },
        // 点击栏目是触发的函数
        changeFn(name){
            // name：就是点击栏目对应的下标值
            // console.log(name, title);
            this.news = [];
            this.pageIndex = 1;
            this.finished = false;
            this.$route.meta.curIndex = name;
            // console.log(this.$route.meta)
            this.getNewsList();
        },
        // 点击新闻列表-跳转到新闻详情页面
        toPage(id){
            this.$router.push({
                path: "/articleDetail",
                query: {
                    id: id
                }
            })
        },  
        // 下拉刷新
        onRefresh(){
            // console.log(71);
            // 重置数据
            this.news = [];
            this.pageIndex = 1;
            this.finished = false;
            // 实现刷新数据功能，就是重新调用一下获取新闻列表的接口即可
            this.getNewsList();
        },
        // 上拉加载
        onLoad(){
            // console.log(84);
            // this.loading = false;
            if(this.news.length == 0){return} // 防止下拉刷新的时候，触发onload函数并执行获取文章列表操作
            this.pageIndex++;
            this.getNewsList();
        },
        // 获取新闻列表
        getNewsList(){
            getNews({
                category: this.categoryList[this.curIndex].id, // 传递栏目id给后端
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }).then(res=>{
                // this.news = res.data.data;
                // 上拉加载更多数据，数据就不能简单的赋值，需要合并数据
                // this.news = this.news.concat(res.data.data);
                this.news = [...this.news, ...res.data.data];
                // 数据获取成功后把isLoading修改false表示刷新完成
                this.isLoading = false;
                // 数据请求成功后，需要把loading修改为false表示数据加载完成
                this.loading = false;
                // 当数据全部加载完成后需要把finished修改为true
                // 如何判断数据全部加载完成呢？
                // 答：可以通过返回的数据数组长度和请求的数据量进行比较，如果请求回来的数据数组长度小于请求的数据量
                // 说明已经没有更多数据(全局加载完成了)
                if(res.data.data.length<this.pageSize){
                    this.finished = true;
                }
                // console.log(48,res);
                this.$toast.clear(); // 清除加载条
            })
        }
    }
}
</script>

<style lang="less" scoped>
.van-nav-bar{
    background-color: red;
    .icon-left{
        font-size: 50px;
        color: #fff;
    }
    .van-icon{
        color: #fff;
    }
     /deep/.van-nav-bar__title{
        width: 60%;
        .search{
            height: 36px;
            line-height: 36px;
            color: #fff;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.3);
        }
    }
}
/deep/.van-tabs__wrap{
    padding-right: 44px;
    &::after{
    content: "+";
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 30px;
    background-color: #fff;
}
}
</style>